<template>
<div class="bg-white">
    <div class="container">
        <img src="../../../static/images/img/bluenews-topbanner.jpg" alt="" class="bluenews-topbanner">
        <div class="clearfix">
            <div class="fl bluenews-left mgr-30">
                <div class="bluenews-title">
                    <ul class="bluenews-title-list clearfix">
                        <li class="current-tittle">绿色资讯</li>
                        <li v-for="(item,index) in bluenewsTitle" :key="index">{{item.category_title}}</li>
                    </ul>
                </div>
                <ul class="bluenews-left-content mgb-30" :data="bluenewsLeft.slice((currpage-1) * pagesize,currpage*pagesize)">
                    <li v-for="(bluenewsLeftlist,index) in bluenewsLeft" :key="index" @click="toLvcaiNewslist(bluenewsLeftlist)">
                        <a href="javascript:void(0);">
                            <div class="clearfix">
                                <!-- <img src="../../../static/images/img/pinbiao-img.png" alt="" class="fl bluenews-left-img"> -->
                                <img :src="bluenewsLeftlist.thumb" alt="" class="fl bluenews-left-img"/>
                                <div class="fr bluenews-left-text">
                                    <p class="tip">{{bluenewsLeftlist.title}}</p>
                                    <p class="detail">{{bluenewsLeftlist.description}}</p>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="prev, pager, next"
                :total="bluenewsLeft.length"
                class="mgt-30 tl">
            </el-pagination> -->
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pagesize"
              :page-sizes="[10]"
              :total="bluenewsLeft.length"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              class="tl mgt-30 mgb-30"
              >
            </el-pagination>
            </div>
            <div class="fr bluenews-right">
                <div class="bluenews-right-project">
                    <p>绿色项目</p>
                    <ul class="clearfix bluenews-project-list">
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                        <li>
                            <router-link to=""><img src="../../../static/images/img/pinbiao-img.png" alt=""></router-link>
                            <p>xxxxxx</p>
                        </li>
                    </ul>
                </div>
                <div class="bluenews-right-zhaomu">
                    <p>绿色项目</p>
                    <ul class="bluenews-zhaomu-list">
                        <li><router-link to="">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</router-link></li>
                        <li><router-link to="">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</router-link></li>
                        <li><router-link to="">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</router-link></li>
                        <li><router-link to="">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</router-link></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import jquery from '../../assets/js/jquery-1.10.2.min.js'
import axios from 'axios'
export default {
  name:'Bluenews',
  data(){
    return{
      formInline:{
        pagesize:'',
        currpage:''
      },
      bluenewsTitle:[],
      bluenewsLeft:[],
      currpage:1,
      pagesize:10,
      bluenewsLeftlist:{}
    }
  },
  methods:{
    // 绿色资讯-文字标题
    getBluenewsTitle () {
      debugger;
      var that=this
      axios.get('/article/category')
      .then(function(res){
        res = res.data
        that.bluenewsTitle = res.response
      })
    },
    // 绿色资讯-列表-左边
    getBluenewsLeft () {
      debugger;
      var that=this
      axios.get('/article/list',{params: {
            pagesize: this.pageSize,
            currpage: this.currentPage
          }})
      .then(function(res){
        res = res.data
        that.bluenewsLeft = res.response
      })
    },
    handleCurrentChange(cpage){
      this.currpage = cpage;
      this.getBluenewsLeft()
    },
    handleSizeChange(psize){
      this.pagesize = psize;
    },
    // 点击绿采头条新闻 进入新闻详情
    toLvcaiNewslist(bluenewsLeftlist) {
      debugger;
      console.log(bluenewsLeftlist)
      this.$router.push({
        name: 'Blueinfo_detail', params: {bluenewsLeftlist: JSON.stringify(bluenewsLeftlist)}
        //path:'/Blueinfo_detail/${bluenewsLeftlist.id}',
        // query: {goodsList: goodsList}
        // 解决传过来的参数值在刷新页面后丢失
        //query: {bluenewsLeftlist: JSON.stringify(bluenewsLeftlist)}
      })
    }
  },
  created:function () {
    this.$emit('public_header', false);
    this.$emit('public_footer', true);
    this.$emit('public_headerhover', true);
    this.getBluenewsTitle();
    this.getBluenewsLeft();
  },
}
</script>

<style>
 @import '../../../static/style/bluenews';
</style>
